<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JS中常见事件</title>
</head>
<body>
    <img id="icon" src="imgs/pet-01.jpg">
    <input>
    <script type="text/javascript">
        // 当页面加载完毕
        window.onload = function () {
//            alert('页面加载完毕');

            var img = document.getElementById('icon');
            var input = document.getElementsByTagName('input')[0];

            // 鼠标进入图片
            img.onmouseover = function () {
                console.log('鼠标进入图片')
            }
            img.onmousemove = function () {
                console.log('鼠标在图片上移动')
            }
            img.onmouseout = function () {
                console.log('鼠标离开图片')
            }

            input.onfocus = function () {
                input.style.width = '200px';
                input.style.height = '50px';
            }
        }
    </script>
</body>
</html>